import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { FilterItem } from 'components'
import {
    Form,
    Button,
    Row,
    Col,
    Divider,
    Input,
    Select,
    DatePicker,
    Icon
} from 'antd'

const FormItem = Form.Item;
const { RangePicker } = DatePicker;

const filterStyle = {
    style: {
        marginBottom: 16
    }
};

const formItemLayout = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 18
    }
};
const Option = Select.Option;

const OrderFilterUnExpand = ({
    filterItems,
    onFilterChange,
    isExpand,
    form: {
        getFieldDecorator,
        getFieldsValue,
        setFieldsValue
    },
    expand,
    noExpand
}) => {
    let filterItemsDealed;
    if (isExpand) {
        filterItemsDealed = filterItems;
    } else {
        if (filterItems.length > 3) {
            filterItemsDealed = filterItems.slice(0, 2);
        } else {
            filterItemsDealed = filterItems;
        }
    }

    const handleFields = (fields) => {
        for (let key in fields) {
            let field = fields[key];
            // 删除请求中为空的对象
            if (!field || (_.isString(field) && field.replace(/(^\s*)|(\s*$)/g, "").length == 0)
                || _.isUndefined(field)
                || _.isNull(field)
                || (_.isArray(field) && field.length === 0)) {
                delete fields[key];
                continue;
            }
            // 处理日期类型
            if (_.endsWith(key, "Time") && _.isArray(fields[key]) && fields[key].length > 0) {
                let timeStartValue = fields[key][0].valueOf();
                let timeEndValue = fields[key][1].valueOf();
                let timeStartKey = key + "Start";
                let timeEndKey = key + "End";
                fields[timeStartKey] = timeStartValue;
                fields[timeEndKey] = timeEndValue;
                delete fields[key];
            }
        }
        return fields
    }

    const handleSubmit = () => {
        let fields = getFieldsValue()
        fields = handleFields(fields)
        onFilterChange(fields)
    }

    const handleReset = () => {
        const fields = getFieldsValue()
        for (let item in fields) {
            if ({}.hasOwnProperty.call(fields, item)) {
                if (fields[item] instanceof Array) {
                    fields[item] = []
                } else {
                    fields[item] = undefined
                }
            }
        }
        setFieldsValue(fields)
        handleSubmit()
    }

    const handleChange = (key, values) => {
        let fields = getFieldsValue()
        fields[key] = values
        fields = handleFields(fields)
        onFilterChange(fields)
    }

    const dateChange = (date, dateString) => {
        console.log(date, dateString);
    }
    const getFilterItemCol = (filterItems) => {
        const result = filterItems.map((filterItem, index) => <Col key={index} span={8}>
            <FormItem label={filterItem.title} {...formItemLayout}>
                {filterItem.type == 'input' && getFieldDecorator(`${filterItem.id}`, {})(<Input placeholder={filterItem.placeholder} onPressEnter={handleSubmit}/>)}
                {filterItem.type == 'select' && getFieldDecorator(`${filterItem.id}`, { initialValue: filterItem.defaultValue })(
                    <Select
                        initialValue={filterItem.defaultValue}
                        style={{
                            width: '100%'
                        }}>
                        {getOptions(filterItem.options)}
                    </Select>
                )}
                {filterItem.type == 'dateRule' && getFieldDecorator(`${filterItem.id}`, {})(<RangePicker
                    style={{
                        width: '100%'
                    }}
                    showTime
                    initialValue={[
                        moment(filterItem.bdTime || '', filterItem.dateFormat || "YYYY/MM/DD"),
                        moment(filterItem.edTime || '', filterItem.dateFormat || "YYYY/MM/DD")
                    ]}
                    format={filterItem.dateFormat || "YYYY/MM/DD"}
                    onChange={dateChange} />)}
                {filterItem.type == 'date' && getFieldDecorator(`${filterItem.id}`, {})(<DatePicker
                    style={{
                        width: '100%'
                    }}
                    onChange={dateChange} />)}
            </FormItem>
        </Col>);
        return ((result));
    }

    // 处理下拉选项
    const getOptions = (value) => value.map(option => {
        return <Option value={option.value} key={option.value}>{option.name}</Option>
    })

    const filterItemCols = getFilterItemCol(filterItemsDealed);

    return (
        <Row gutter={24} {...filterStyle}>
            {filterItemCols}
            <Col span={8} style={{
                textAlign: 'left'
            }}>
                <Button type="primary" onClick={handleSubmit}>查询</Button>
                <Divider type="vertical" />
                <Button type="ghost" onClick={handleReset}>重置</Button>
            </Col>
        </Row>
    )
}

OrderFilterUnExpand.propTypes = {
    form: PropTypes.object,
    filter: PropTypes.object,
    onFilterChange: PropTypes.func
}

export default Form.create()(OrderFilterUnExpand)
